import React, { useEffect, useState, useMemo } from "react";

import { createFromIconfontCN } from "@react-vant/icons";

import { NavBar, Badge, Toast } from "react-vant";
import axios from "axios";

// import PageMsg from "../computent/PageMsg";
import PageMsg from "./PageMsg";

// 添加一个清除的图标
const IconFont = createFromIconfontCN(
  "//at.alicdn.com/t/c/font_4505052_cydbqnd7jr7.js"
);
function WebSocketComponent() {
  const [list, setList] = useState([]);
  const [messages, setMessages] = useState([]);

  // 判断messages中的is_read字段有false就返回true，否则返回false
  const isAllRead = useMemo(() => {
    return messages.some((message) => !message.is_read);
  }, [messages]);
  const getShop = () => {
    axios.get("http://127.0.0.1:3000/lx/get").then((res) => {
      console.log(res.data.data,9999);
      
      setList(res.data.data);
      setMessages(res.data.data1);
      console.log(res.data.data1, 111111);
      console.log(list, 222222);
    });
  };

  useEffect(() => {
    getShop();
  }, []);

  return (
    <div style={{ width: "100vw" }}>
      <NavBar
        title="用户消息"
        leftArrow={false}
        rightText={
          <Badge dot={isAllRead}>
            <IconFont
              name="icon-qingchu1"
              style={{ fontSize: "25px", color: "#333" }}
            />
          </Badge>
        }
        onClickRight={() => {
          // 清除所有未读消息
          axios.post("http://127.0.0.1:3000/lx/updateChat").then((res) => {
            // setMessages(res.data.data1);
            console.log(res.msg);
            getShop();
            Toast.success("清除成功");
          });
          // Toast.success("清除成功");
        }}
      />
      <PageMsg list={list} IconFont={IconFont} />
    </div>
  );
}

export default WebSocketComponent;
